<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { ElMessage } from "element-plus";
import router from "../config/route";
import { useUserState } from "../store";
import ACCESS_ENUM from "../assets/content/ACCESS_ENUM";
import { listQuestionVoByPageUsingPost } from "../servers/question/api/questionController";

// 搜索初始化参数
const initSearchParam = {
  id: undefined,
  title: "",
  content: "",
};

const searchParam = ref({ ...initSearchParam });

/** 分页初始化参数 */
const initPageParam = {
  current: 1,
  pageSize: 4,
};
/** 分页渲染数据 */
const tableData = ref<API.QuestionVO[]>([]);
/** 分页总数 */
const pageTotal = ref<number>(2);

/** 分页请求参数 */
const pageParam = ref<API.QuestionQueryRequest>({ ...initPageParam });
/** 获取分页数据 */
const getQuestionPage = async () => {
  const res = await listQuestionVoByPageUsingPost(pageParam.value);
  if (res.data.code === 200) {
    tableData.value = res.data.data?.records || [];
    pageTotal.value = res.data.data?.pages || 2;
  } else {
    ElMessage.error("获取数据失败" + res.data.message);
  }
};

// 获取分页数据
const getPageData = (currentPage: number) => {
  console.log(currentPage);
  pageParam.value.current = currentPage;
  // 获取分页数据
  getQuestionPage();
};

// 题目搜索
const searchQuestion = () => {
  // 导入数据到分页数据中   分页当前页为第1页
  pageParam.value = { ...pageParam.value, ...searchParam.value };
  // 刷新数据
  getQuestionPage();
  // 清空搜索数据
  searchParam.value = { ...initSearchParam };
};

// 做题
const checkOrDoQuestion = (id: string) => {
  // 判断是否登录
  if (useUserState().checkUserAccess(ACCESS_ENUM.NOT_LOGIN)) {
    ElMessage.error("用户未登录");
  } else {
    // 跳转到对应题目页面
    setTimeout(() => {
      router.push({
        name: "完成题目",
        params: { id },
      });
    }, 50);
  }
};

// 页面加载完成之后加载
onMounted(() => {
  // 获取题目分页数据
  getQuestionPage();
});
</script>

<template>
  <div class="me-question-view">
    <div style="margin: 10px 20px">
      题目编号
      <el-input
        style="max-width: 80px; margin-right: 20px"
        v-model="searchParam.id"
      ></el-input>
      题目名称
      <el-input
        style="max-width: 160px; margin-right: 20px"
        v-model="searchParam.title"
      ></el-input>
      题目描述
      <el-input
        style="max-width: 240px; margin-right: 20px"
        v-model="searchParam.content"
      ></el-input>
      <el-button type="primary" @click="searchQuestion">搜索</el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="题目编号" width="120" />
      <el-table-column prop="title" label="题目名称" />
      <el-table-column prop="content" label="题目描述" />
      <el-table-column label="标签">
        <template #default="scope">
          <el-tag
            v-for="item in scope.row.tags"
            :key="item"
            type="primary"
            style="margin-left: 10px"
            >{{ item }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column
        label="通过率(通过/提交)"
        width="140px"
        :align="'center'"
      >
        <template #default="scope">
          {{ scope.row.acceptedNum / (scope.row.submitNum || 1) }} % &nbsp; (
          {{ scope.row.acceptedNum }} / {{ scope.row.submitNum }})
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="150"
        :align="'center'"
      />
      <el-table-column prop="option" label="操作" width="180" :align="'center'">
        <template #default="scope">
          <el-button type="primary" @click="checkOrDoQuestion(scope.row.id)"
            >做题</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div
      style="
        display: flex;
        flex-direction: column;
        justify-self: center;
        margin-top: 10px;
      "
    >
      <el-pagination
        hide-on-single-page
        v-model:current-page="pageParam.current"
        layout="prev, pager, next"
        :page-count="+pageTotal"
        @current-change="getPageData"
      />
    </div>
  </div>
</template>

<style scoped></style>
